<template>
  <div class="page-container">
    <div
      class="in-container"
      v-loading="loading"
    >
      <el-row :gutter="8">
        <el-col :span="4">
          <div class="type-list">
            <div class="title">类别</div>
            <div
              class="list-item"
              :class="activeIndex == index ? 'item-active' : ''"
              v-for="(item, index) in typeData"
              :key="item.id"
              @click="changeType(item, index)"
            >
              {{ item.label }}
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div>
            <!-- <el-form
              :data="query"
              inline
            >
              <el-form-item style="margin-bottom: 8px">
                <el-input
                  v-model="query.name"
                  placeholder="请输入简称、全称"
                >
                </el-input>
              </el-form-item>
              <el-button
                type="primary"
                @click="search"
                style="margin-bottom: 8px"
              > 搜索 </el-button>
              <el-button
                type="primary"
                @click="reset"
                style="margin-bottom: 8px"
              > 重置 </el-button>
            </el-form> -->
            <AppSearchForm @submit="search()" @reset="reset()">
        <el-form-item>
          <el-input
            v-model="query.name"
            clearable
            placeholder="请输入简称、全称"
            style="width: 200px"
          />
        </el-form-item>
      </AppSearchForm>
          </div>
          <div class="btn-box">
            <el-button
              @click="turnToNew"
              type="primary"
            >新增</el-button>
            <el-button
              @click="turnToUpdate"
              type="primary"
            >详情</el-button>
            <!-- <el-button
              @click="deleteData"
              type="danger"
            >删除</el-button> -->
          </div>
          <AppPageTable
            stripe
            :data="typeDetailTableData.data"
            :autostyle="'height: calc(100% - 85px)'"
            :option="typeDetailTableData.option"
            @change="getTabelData()"
          >
            <el-table-column
              type="selection"
              width="50"
            />
            <el-table-column
              show-overflow-tooltip
              prop="entCode"
              label="客户编号"
            />
            <el-table-column
              show-overflow-tooltip
              prop="entName"
              label="简称"
            />
            <el-table-column
              show-overflow-tooltip
              prop="entFullname"
              label="全称"
            />
            <el-table-column
              show-overflow-tooltip
              prop="linktel"
              label="电话"
            />
            <el-table-column
              show-overflow-tooltip
              prop="address"
              label="地址"
            />
            <el-table-column
              show-overflow-tooltip
              prop="fax"
              label="传真"
            />
            <el-table-column
              show-overflow-tooltip
              prop="cltTypeName"
              label="分类"
            />
            <el-table-column
              show-overflow-tooltip
              prop="firstContact"
              label="首次联系"
              width="130"
            >
              <template #default="scope">
                {{ parseTime(scope.row.firstContact) }}
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="salesName"
              label="业务员"
            />
            <el-table-column
              show-overflow-tooltip
              prop="mainLinkName"
              label="主联系人"
            />
            <el-table-column
              show-overflow-tooltip
              prop="cltSourceName"
              label="来源"
            />
            <el-table-column
              show-overflow-tooltip
              prop="webUrl"
              label="网址"
            />
            <el-table-column
              show-overflow-tooltip
              prop="createTime"
              label="建档日期"
              width="130"
            >
              <template #default="scope">
                {{ parseTime(scope.row.createTime) }}
              </template>
            </el-table-column>
          </AppPageTable>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import AppSearchForm from "@/components/AppSearchForm.vue";
import AppTitleBox from "@/components/AppTitleBox.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import dayjs from "dayjs";
export default defineComponent({
  components: {
    AppSearchForm,
    AppPageTable,
    AppTitleBox,
  },
  data() {
    return {
      // 类型列表
      typeData: [],
      //详情表格数据
      typeDetailTableData: {
        id: "",
        dictName: "",
        data: [],
        option: useTableOption(),
      },
      activeIndex: 0,
      query: {
        name: "",
        id: 0,
      },
      loading: false,
    };
  },
  methods: {
    parseTime(data) {
      if (data) {
        return dayjs(data).format("YYYY-MM-DD");
      }
      return ""
    },
    initData() {
      this.loading = true;
      this.$http
        .get("/api/dictDetail/query", {
          PageIndex: 1,
          PageSize: 10,
          DictName: "TRADER_TYPE",
        })
        .then((res) => {
          this.typeData = res.content;
          if (this.typeData.length > 0) {
            this.query.id = this.typeData[0].id;
            this.getTabelData();
          }
        })
        .finally(() => (this.loading = false));
    },
    getTabelData() {
      this.typeDetailTableData.option.loading = true;
      this.$http
        .get("/api/buenterprise/query", {
          KeyWords: this.query.name,
          TypeId: this.query.id,
          PageIndex: this.typeDetailTableData.option.page,
          PageSize: this.typeDetailTableData.option.pageSize,
        })
        .then((res) => {
          this.typeDetailTableData.data = res.content;
          this.typeDetailTableData.option.total = res.totalElements;
        })
        .finally(() => (this.typeDetailTableData.option.loading = false));
    },
    changeType(data, index) {
      this.query.id = data.id;
      this.activeIndex = index;
      this.typeDetailTableData.option.page = 1;
      this.typeDetailTableData.option.pageSize = 10;
      this.getTabelData();
    },
    search() {
      this.typeDetailTableData.option.page = 1;
      this.typeDetailTableData.option.pageSize = 10;
      this.getTabelData();
    },
    reset(){
      this.query={
        name: "",
      };
      this.typeDetailTableData.option.page = 1;
      this.typeDetailTableData.option.pageSize = 10;
      this.getTabelData();
    },
    turnToNew() {
      this.$router.openTab({
        path: "/enterprise/enterpriseDetail",
        query: {
          title: `新增客商`,
          entType: this.query.id,
        },
      });
    },
    turnToUpdate() {
      if (this.typeDetailTableData.option.selected.length == 1) {
        this.$router.openTab({
          path: "/enterprise/enterpriseDetail",
          query: {
            title: `详细信息-${this.typeDetailTableData.option.selected[0].entCode}`,
            entId: this.typeDetailTableData.option.selected[0].id,
          },
        });
      } else {
        this.$message.warning("请选择一条数据");
      }
    },
    deleteData() {
      if (this.typeDetailTableData.option.selected.length == 0) {
        this.$message.warning("请选择一条数据");
        return
      };
      let deleteIndex = [];
      this.typeDetailTableData.option.selected.forEach((t) => {
        deleteIndex.push(t.id);
      });
      //删除关系 删除数据为/api/buenterprise/delete
      this.$http
        .post("/api/buenterprise/deleteType", {
          EntId: deleteIndex,
          TypeId: this.query.id,
        })
        .then((res) => {
          if (res.status) {
            this.$message.success(res.message);
            this.typeDetailTableData.option.page = 1;
            this.getTabelData();
          } else {
            this.$message.error(res.message);
          }
        });
    },
  },
  watch: {},
  created() {
    this.initData();
  },
});
</script>

<style lang="scss" scoped>
.el-row {
  height: 100%;
}

.type-list {
  .title {
    font-size: 20px;
    padding-left: 20px;
    background-color: rgb(247, 251, 255);
    line-height: 2.5;
  }

  .list-item {
    background-color: rgb(247, 251, 255);
    padding: 8px 0 8px 20px;
    cursor: pointer;
  }

  .item-active {
    background-color: rgb(234, 241, 253);
  }
}

.btn-box {
  margin-bottom: 8px;
}
</style>
